<template>
  <div class="page-container user">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <van-image
          round
          width="64"
          height="64"
          :src="userAvatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
        />
        <div class="user-detail">
          <h3 class="username" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : ''}">{{ userStore.userInfo.nickname || '未登录' }}</h3>
          <p class="user-id" v-if="userStore.userInfo.username" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : ''}">账号: {{ userStore.userInfo.username }}</p>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-group">
      <van-cell-group inset>
        <van-cell title="我的订单" is-link to="/order" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : ''}"/>
        <van-cell title="服务对象管理" is-link to="/clients" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
        <van-cell title="修改个人信息" is-link to="/update-user-info" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
        <van-cell title="修改密码" is-link to="/update-password" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
        <van-cell :title="userStore.userInfo.hasPayPassword === 1 ? '设置支付密码' : '修改支付密码'" is-link to="/update-update-payPassword" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
      </van-cell-group>
    </div>

    <div class="menu-group">
      <van-cell-group inset>
        <van-cell :title="userStore.userInfo.ageGroup === 0 ? '切换老年人模式' : '切换青少年模式'" is-link @click="changeMode" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
        <van-cell title="关于我们" is-link @click="showAbout" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : '',margin:userStore.userInfo.ageGroup === 1 ? '10px 0 10px 0' : ''}"/>
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button block @click="handleLogout" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '30px' : ''}" >退出登录</van-button>
    </div>
  </div>
</template>

<script setup>
import { showDialog, showToast } from 'vant'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import { userApi } from '@/api'

const router = useRouter()
const userStore = useUserStore()
const userAvatar = ref('')

// 获取头像
const updateUserinfo = async () => {
  try {
    const userRes = await userApi.current()
    if (userRes.data.avatar) {
      // 创建一个带有认证信息的请求来获取图片
      const token = localStorage.getItem('token')
      const response = await axios.get(`${userRes.data.avatar}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        },
        responseType: 'blob'
      })

      // 创建 Blob URL
      const blob = new Blob([response.data], { type: response.headers['content-type'] })
      userAvatar.value = URL.createObjectURL(blob)
    }
  } catch (error) {
    console.error('获取头像失败：', error)
  }
}

onMounted(() => {
  updateUserinfo()
})

// 在组件卸载时清理 Blob URL
onUnmounted(() => {
  if (userAvatar.value && userAvatar.value.startsWith('blob:')) {
    URL.revokeObjectURL(userAvatar.value)
  }
})

// 设置
const changeMode = () => {
  showDialog({
    title: '提示',
    message: `确定要切换${userStore.userInfo.ageGroup === 0 ? '老年人模式' : '青少年模式'}吗？`,
    theme: 'round-button',
    showCancelButton: true
  }).then(async () => {
    let userData =  userStore.userInfo
  userData.ageGroup = Number(!userData.ageGroup)
  userStore.setUserInfo(userData)
  let params = {
    ageGroup:userData.ageGroup
  }
  const res = await userApi.profile(params)
  if(res.code === 200){
    showToast('切换成功')
  }else {
    showToast('切换失败')
  }
  if(userData.ageGroup){
    console.log('目前是老年人模式')
  }else{
    console.log('目前是青少年模式')
  }
  })
}

// 关于我们
const showAbout = () => {
  showDialog({
    title: '关于我们',
    message: '就医陪诊平台 v1.0.0\n为您提供便捷的医疗服务预约平台',
    theme: 'round-button'
  })
}

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    theme: 'round-button',
    showCancelButton: true
  }).then(() => {
    userStore.clearUserState()
    router.push('/login')
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style lang="scss" scoped>
.user {
  .user-card {
    padding: 32px 16px;
    margin-bottom: 12px;
    background: linear-gradient(to right, var(--primary-color), #14d38b);

    .user-info {
      display: flex;
      align-items: center;
      color: #fff;

      .user-detail {
        margin-left: 16px;

        .username {
          margin: 0;
          font-size: 20px;
          font-weight: 500;
        }

        .user-id {
          margin: 4px 0 0;
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
  }

  .menu-group {
    margin-bottom: 12px;
  }

  .logout-btn {
    margin: 24px 16px;

    .van-button {
      height: 44px;
      font-size: 16px;
      color: #ee0a24;
      background: #fff;
      border: none;
      border-radius: 8px;
    }
  }
}
</style> 